import { AfterViewInit, Component, ContentChildren, ElementRef, EventEmitter, HostListener, Output, QueryList, ViewChildren } from '@angular/core';
import { SelectableDirective } from './selectable.directive';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-selection-box-cmp',
  standalone: true,
  imports: [CommonModule,FormsModule, SelectableDirective],
  templateUrl: './selection-box-cmp.component.html',
  styleUrl: './selection-box-cmp.component.sass'
})
export class SelectionBoxCmpComponent implements AfterViewInit {
  @ContentChildren(SelectableDirective) selectables!: QueryList<SelectableDirective>;
  @Output() itemsSelected = new EventEmitter<any[]>();
 
 
  isSelecting = false;
  startX = 0;
  startY = 0;
  currentX = 0;
  currentY = 0;
 
  constructor(private elementRef: ElementRef) {}
 
  ngAfterViewInit() {
    // 确保子元素渲染完成后再进行查询
  }
 
  @HostListener('document:mousemove', ['$event'])
  onMouseMove(event: MouseEvent) {
    if (!this.isSelecting) return;
    
    const rect = this.elementRef.nativeElement.getBoundingClientRect();
    this.currentX = event.clientX - rect.left;
    this.currentY = event.clientY - rect.top;
  }
 
  @HostListener('document:mouseup', ['$event'])
  onMouseUp() {
    if (!this.isSelecting) return;
    
    this.isSelecting = false;
    const selectedItems = this.getSelectedItems(); 
    this.itemsSelected.emit(selectedItems);
  }
 
  startSelection(event: MouseEvent) {
    if (event.button !== 0) return; // 只处理左键

   if (this.selectables.some(s=>s.elementRef.nativeElement.contains(event.target as Node))) {
      return;
    } 
    
    this.isSelecting = true;
    const rect = this.elementRef.nativeElement.getBoundingClientRect();
    this.startX = event.clientX - rect.left;
    this.startY = event.clientY - rect.top;
    this.currentX = this.startX;
    this.currentY = this.startY;
  }
 
  public get width(): number {
    return Math.abs(this.currentX - this.startX);
  }
 
  public get height(): number {
    return Math.abs(this.currentY - this.startY);
  }
 
  // 在组件类中添加以下计算属性
get selectionLeft(): number {
  return Math.min(this.startX, this.currentX);
}
 
get selectionTop(): number {
  return Math.min(this.startY, this.currentY);
}
 
get selectionWidth(): number {
  return Math.abs(this.currentX - this.startX);
}
 
get selectionHeight(): number {
  return Math.abs(this.currentY - this.startY);
}
 

  private getSelectedItems(): any[] {
     const selectionRect = {
    left: Math.min(this.startX, this.currentX),
    right: Math.max(this.startX, this.currentX),
    top: Math.min(this.startY, this.currentY),
    bottom: Math.max(this.startY, this.currentY)
  };
 
  let datas = this.selectables.toArray().filter(item => {
    const element = item.elementRef.nativeElement;
    const itemRect = element.getBoundingClientRect();
    const containerRect = this.elementRef.nativeElement.getBoundingClientRect();
 
    // 转换为容器坐标系
    const itemLeft = itemRect.left - containerRect.left;
    const itemRight = itemRect.right - containerRect.left;
    const itemTop = itemRect.top - containerRect.top;
    const itemBottom = itemRect.bottom - containerRect.top;
 
    return !(
      itemRight < selectionRect.left ||
      itemLeft > selectionRect.right ||
      itemBottom < selectionRect.top ||
      itemTop > selectionRect.bottom
    );
  });
    return datas.map(item => {
      return item.data;
  });
}

}